function User (name) {
  this.name = name
  this.id = faker.random.uuid()
  this.init()
}

User.prototype = {
  init () {
    this.render()
    this.connectSocket()
  },
  render () {
    let template = `
      <div id="${this.id}" class="col-md-6">
        <div class="user p-2">
          <h4>${this.name}</h4>
          <div class="row mb-3">
            <div class="col">
              <button type="button" class="btn btn-primary btn-join">Join Room</button>
            </div>
          </div>
          <ul class="messages list-group" style="max-height: 500px; overflow:auto;">
          </ul>
        </div>
      </div>
    `
    $('#user-list').append(template)
    this.bindingEvent()
  },
  log (msg) {
    if (_.isObject(msg)) {
      msg = JSON.stringify(msg)
    }
    let now = moment()
    let st = moment().format('hh:mm:ss SSS')
    let html = `<li class="list-group-item py-4 list-group-item-action"><span class="time-stamp">${st}:&nbsp</span>${msg}</li>`
    $(`#${this.id} .messages`).prepend(html)
  },
  bindingEvent () {
    $(`#${this.id} .btn-join`).click(this.joinRoom.bind(this))
  }
}
_.extend(User.prototype, UserSocket.prototype)


window.UserMgr = function () {
  let users = {}
  return {
    addUser () {
      let name = faker.name.findName()
      let user = new User(name)
      users[name] = user
      
    },
    getUsers () {
      return users
    }
  }
}()

